/** @jsxImportSource @emotion/react */
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import * as React from "react";
import { Button } from "../Button";
import { Collapse, useCollapse } from "../Collapse";

const meta: Meta<typeof Collapse> = {
    title: 'Example/Collapse',
    component: Collapse,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
    },
    args: { onClick: fn() },
};
export default meta;
type Story = StoryObj<typeof Collapse>;
export const 没动画的: Story = {
    decorators: [
        (Story) => (
            <>
                    <Example/>
            </>
        ),
    ],
};
export const 有动画的: Story = {
    decorators: [
        (Story) => (
            <>
                <Collapse id="hi" show noAnimated={false}>
                    <div>This is some crazy content</div>
                    <div>This is some crazy content</div>
                    <div>This is some crazy content</div>
                    {new Array(0).fill(null).map((a, i) => (
                        <div key={i}>Item number {i}</div>
                    ))}
                </Collapse>
            </>
        ),
    ],
};

const Example = () => {
  const state = useCollapse(false);
  const [more, showMore] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      showMore(1 + more);
    }, 2000);

    return () => clearTimeout(timer);
  }, [more]);

  return (
    <div>
      <Button {...state.buttonProps}>Click to reveal!</Button>
      <Collapse {...state.collapseProps} noAnimated={true}>
        <div>This is some crazy content</div>
        <div>This is some crazy content</div>
        <div>This is some crazy content</div>
        {new Array(more).fill(null).map((a, i) => (
          <div key={i}>Item number {i}</div>
        ))}
      </Collapse>
    </div>
  );
};
